<template>
	<view>
		<u-popup :show="vipPopupShow" mode="bottom" @close="close" :closeable="true" style="position: relative;">
			<scroll-view scroll-y>
				<view style="padding: 30rpx;" class="popup-y" >
					<text class="title">会员套餐服务</text>
					<view class="price" style="margin-top: 20rpx;">
						<view class="pay-container flex-1" :class="{ acitve: currentType === index }"
							@click="setCurrentType(index)" v-for="(it,index) in payList">
							<image :src="it.price_img" mode="widthFix"></image>
						</view>
					</view>
					<view class="flex-row-center" style="margin: 30rpx 0;">
						<u-checkbox activeColor="#67b12f" shape="circle"
							 @change="change"></u-checkbox>
							 <text class="label" @click="open">购买表示你已经同意服务协议</text>
					</view>
					<u-line dashed></u-line>
					<view class="title" style="margin: 20rpx 0;">会员权益</view>
					<view class="table">
						<image :src="payList.length > 0 ? payList[currentType].img : ''" mode="widthFix" style="width: 100%;"></image>
					
					</view>
					<view class="placeholder"></view>
				</view>
			</scroll-view>
			<view class="pay-bottom">
				<!-- <view class="flex-row-between">
					<view style="font-size: 40rpx; color: #dd5c49;">
						<text>￥</text>398<text style="font-size: 26rpx;"> / 1年</text><text
							style="font-size: 20rpx; color: #afafaf; text-decoration: line-through; margin-left: 10rpx;">￥398</text>
					</view>
					<view class="discounts">优惠后￥0.95/天</view>
				</view>
				<view class="pay-coupon">已使用50元优惠券</view> -->
				<view class="pay-botton" @click="buy">立即购买</view>
			</view>
		</u-popup>
		<privacyAgreement ref="privacyAgreementRef"/>
	</view>
	
</template>

<script>
	import {
		circle_right,
		circle_price,
		circle_pay
	} from '@/common/http/api.js'
	import privacyAgreement from '../privacy-agreement/privacy-agreement.vue'
	export default {
		components:{
			privacyAgreement
		},
		data(){
			return {
				vipPopupShow: false,
				payList: [],
				right: {},
				currentType: 0,
				checked: false,
				term: ''
			}
		},
		methods:{
			open(){
				this.$refs.privacyAgreementRef.show(this.term)
			},
			change(e) {
				this.checked = e
				console.log('e', e)
			},
			setCurrentType(index) {
				this.currentType = index
			},
			show(){
				
				circle_price({
					id: 5
				}).then(res => {
					this.payList = res.data.price ?? []
					this.right = res.data.right ?? {}
					this.term = res.data.term
					this.vipPopupShow = true
				})
			},
			close(){
				this.vipPopupShow = false
			},
			buy(){
				if(!this.checked) {
					this.$u.toast('请先勾选服务协议！')
					return
				}
				let current = this.payList[this.currentType]
				uni.showLoading({
					mask: true,
					title: '支付中'
				})
				circle_pay({id: current.id}).then(res=>{
					uni.hideLoading()
					//调用微信官方支付接口弹出付款界面,输入密码扣款
					wx.requestPayment({
						timeStamp: String(res.data.timeStamp),
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: res => {
							console.log('支付成功', res);
							uni.showToast({duration:3000,
								title: '支付成功',
								icon: 'none'
							})
							this.$emit('reload')
							this.close()
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-container {
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0rpx 6rpx 15rpx #f3f0e7;
		// height: 200rpx;
		&.acitve {
			
			box-shadow: 0rpx 6rpx 15rpx #df614d;
		}
	}
	
	.pay-bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx 40rpx;
		background-color: #fff;
		box-sizing: border-box;
	
		.discounts {
			font-size: 26rpx;
			color: #d68238;
		}
	
		.pay-coupon {
			font-size: 20rpx;
			color: #777777;
			margin: 10rpx 0;
		}
	
		.pay-botton {
			width: 100%;
			padding: 20rpx 0;
			text-align: center;
			background-color: #dd5845;
			border-radius: 50rpx;
			color: #fff;
		}
	}
	
	.placeholder {
		height: 200rpx;
	}
	
	.table {
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: -10px 0 10px -5px #f8f8f8,
			/* 左侧阴影 */
			10px 0 10px -5px #f8f8f8,
			/* 右侧阴影 */
			0 10px 10px -5px #f8f8f8;
	
		/* 底部阴影 */
		.cell {
			padding: 20rpx;
	
			.right {
				width: 60rpx;
				text-align: center;
				color: #ab9871;
			}
	
			.wrong {
				width: 60rpx;
				text-align: center;
				color: #aeaeae;
			}
		}
	
	}
	
	.title {
		font-size: 35rpx;
		font-weight: bold;
	}
	
	.pay {
		width: 100%;
		padding: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
	
		&-time {
			font-size: 30rpx;
			font-weight: bold;
			color: #d17d68;
		}
	
		&-price {
			font-size: 40rpx;
			font-weight: bold;
			color: #d17d68;
			margin: 10rpx 0;
		}
	
		&-price.acitve {
			color: #df614d;
		}
	
		&-calc {
			font-size: 20rpx;
			color: #d18370;
		}
	
		&-tag {
			width: 100%;
			background-color: #f3f0e7;
			padding: 10rpx 0;
			font-size: 20rpx;
		}
	
		&-tag.acitve {
			background-color: #df614d;
			color: #fff;
		}
	}
	
	.header-c-t-l-member {
		margin-right: 5rpx;
	}
	.content-img {
		width: 100%;
	
		image {
			width: 100%;
		}
	}
	
	.popup-y {
		max-height: 70vh;
	}
	
	.price {
		overflow-x: scroll;
		white-space: nowrap;
	
		.pay-container {
			//width: 300rpx;
			//min-width: 100rpx;
			width: 215rpx;
			display: inline-block;
			margin-right: 20rpx;
			line-height: 26rpx;
			//max-width: 33%;
			image {
			 width: 100%;
			}
		}
	}
</style>